<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>返回</v-ons-back-button>
      </div>
      <div class="center">银行卡列表</div>
    </v-ons-toolbar>
    <div class="container">
      <div class="data-list">
        <div class="data-item">
          <!-- 银行卡信息 -->
          <div class="bank-info">
            <img
              src="../../assets/resource/consumer/bank_card/ban-icon.png"
              alt="" class='bank-icon'>
            <div>
              <p>银行</p>
              <p>储蓄卡（12345678914156789）</p>
            </div>
          </div>
          <div class="select-status">
            <div class="default-font">（默认）</div>
          </div>
        </div>

        <div class="data-item">
          <div class="bank-info">
            <img
              src="../../assets/resource/consumer/bank_card/ban-icon.png"
              alt="" class='bank-icon'>
            <div>
              <p>银行</p>
              <p>储蓄卡（123456784156789）</p>
            </div>
          </div>
          <div class="select-status">
            <div>
              <button class='checked-btn'>默认</button>
            </div>
            <div>
              <button class='del-btn'>删除</button>
            </div>
          </div>
        </div>

        <div class="data-item" @click="enterPage({path: selectToPageEditor ? '/ServiceSelectEditorBankcard' : '/ServiceEditorBankcard'})">
          <!-- 添加 -->
          <div class="bank-info">
            <img
              src="../../assets/resource/consumer/bank_card/add-icon.png"
              alt="" class='add-bank-icon'>
            <div class="add-bank">
              添加银行卡
            </div>
          </div>
        </div>
      </div>
    </div>
  </v-ons-page>
</template>

<script>
  export default {
    data() {
      return {
        selectToPageEditor: false
      }
    },
    methods: {
      enterPage({path: path, actionSheet: actionSheet}) {
        if (actionSheet) {
          this.actionSheetVisible = false
        }
        this.$router.push({
          path: path
        });
      }
    },
    mounted(){
      let select = this.$route.params.select;
      if(select == 1){
        this.selectToPageEditor = true;
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../assets/less/service/bankcard-list.less";
</style>
